let num = 40;
var container = document.querySelector('.container');
var air = document.querySelector('.shake');
var bullets = document.querySelector('.bullets');
air.style.bottom = -24 + 'px';
air.style.left = 50 + '%';

function rand(n, m) {
    return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
}
for (let i = 0; i < num; i++) {
    const i = document.createElement('i');
    i.style.height = rand(30, 100) + 'px';
    i.style.left = rand(1, 99) + 'vw';
    i.style.animationDuration = rand(5, 30) / 10 + 's'
    container.appendChild(i)
}
document.onkeydown = function (event) {
    var key = event.key;
    switch (key) {
        case 'ArrowUp':
            if (parseInt(air.style.bottom) < (container.clientHeight - 100)) {
                air.style.bottom = parseInt(air.style.bottom) + 8 + 'px';
            }
            break;
        case 'ArrowDown':
            if (parseInt(air.style.bottom) > -24) {
                air.style.bottom = parseInt(air.style.bottom) - 8 + 'px';
            }
            break;
        case 'ArrowLeft':
            if (parseInt(air.offsetLeft) > 50) {
                air.style.left = parseInt(air.offsetLeft) - 8 + 'px';
            }
            break;
        case 'ArrowRight':
            if (parseInt(air.offsetLeft) < (container.clientWidth - 50)) {
                air.style.left = parseInt(air.offsetLeft) + 8 + 'px';
            }
            break;
        case ' ':
            var em = document.createElement('em');
            bullets.appendChild(em);
            break;
        default:
            break;
    }
}